<template>
  <div class="login">
    <!-- 卡片 -->
    <el-card class="box-card">
      <h1 style="margin: 0 0 14px 70px">欢迎使用兔年区块链</h1>
      <!-- user输入表单 -->
      <el-form label-position="right" label-width="80px" :model="user">
        <el-form-item
            label="用户名"
            prop="name"
            :rules="[ { required: true, message: '请输入用户名', trigger: 'blur' } ]">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item
            label="密码"
            prop="password"
            :rules="[ { required: true, message: '请输入密码', trigger: 'blur' } ]">
          <el-input type="password" v-model="user.password" show-password></el-input>
        </el-form-item>
        <!--按钮-->
        <el-form-item class="button">
          <el-button type="warning" @click="login"
                     :disabled="user.name===''||user.password===''" round>登录
          </el-button>
          <el-button @click="resetForm" round>重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import login from '../api/login'
export default {
  data() {
    return {
      // 用户数据
      user: {
        name: '',
        password: '',
        checkPassword: '',
      }
    }
  },
  methods: {
    // 登录
    login() {
      login.login({
        "name": this.user.name,
        "password": this.user.password
      }).then(r => {
        this.$message.success("欢迎，"+r.data.user.name)
        // 将整个userName存入浏览器缓存
        localStorage.setItem("adminName", JSON.stringify(r.data.user.name))
        // 路由到主页
        this.$router.push("/")
      })
    },
    // 重置表单
    resetForm() {
      this.user.name = ""
      this.user.password = ""
      this.user.checkPassword = ""
    }
  }
}
</script>

<style>
@import "~@/assets/css/login.css";
</style>
